<!-- 企业服务-集成企业报表-能源计量管理 -->
<script setup lang="ts">
import { defaultPagingParams } from './'
import type { AjaxPagingParams } from '@/types'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const [tableData, setTableData] = useState<any[]>([])
const [total, setTotal] = useState<number>(0)
const [pagingParams, setPagingParams] = useState<AjaxPagingParams>({
  ...defaultPagingParams,
})

const { vLoading, withLoading } = useDefineLoading()

// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const time = ref<string>('')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
  setTotal(100)
}
function reset() {
  setPagingParams({ ...defaultPagingParams })
  getTableData()
}
function search() {
  Object.assign(pagingParams.value, PAGING.PARAMS)
  getTableData()
}
// #endregion
</script>

<template>
  <div class="padding-sm flex-direction flex align-end container">
    <el-form
      inline
      label-width="40px"
      label-position="left"
      class="flex-incompressible width-fill"
    >
      <el-form-item label="等级">
        <el-select placeholder="全部">
          <el-option value="1" label="一级" />
          <el-option value="2" label="二级" />
          <el-option value="3" label="三级" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">
          搜索
        </el-button>
        <el-button plain @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading :data="tableData" class="flex-fillRemaining">
      <el-table-column fixed type="index" label="序号" width="80" />
      <el-table-column label="类别" width="260">
        设备报警
      </el-table-column>
      <el-table-column label="等级">
        <el-tag type="info">
          三级
        </el-tag>
      </el-table-column>

      <el-table-column label="时间">
        2023-12-20 12:30:20
      </el-table-column>
      <el-table-column label="地点">
        中控室
      </el-table-column>
      <el-table-column label="状态">
        <el-tag type="warning">
          未处理
        </el-tag>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagingParams.pageNumber"
      v-model:page-size="pagingParams.pageSize"
      hide-on-single-page
      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      class="flex-incompressible margin-top-sm"
      @current-change="getTableData"
      @size-change="getTableData"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
